<div class="forget-pwd-container" [@fadeIn]>
    <div class="card">
        <div class="card-header">
            <h5>找回密码</h5>
        </div>
        <div class="card-body">
            <form *ngIf="!message" #form="ngForm" (ngSubmit)="form.form.valid && sendValidationEmail()" role="form"
                novalidate>
                <div class="row mb-3">
                    <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">邮箱：</label>
                    <div class="col-md-10">
                        <input required pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$"
                            #email="ngModel" [(ngModel)]="user.email" name="email" type="email" class="form-control"
                            [ngClass]="{'is-invalid': form.submitted && !email.valid}" placeholder="注册时使用的邮箱">
                        <div *ngIf="form.submitted && !email.valid" class="text-danger">请输入注册时使用的邮箱。</div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="offset-md-2 col-md-10">
                        <button type="button" class="btn btn-primary" (click)="sendValidationEmail()">发送验证邮件</button>
                    </div>
                </div>
            </form>
            <div *ngIf="message" class="alert alert-{{messgeType}}">{{message}}</div>
        </div>
    </div>
</div>